<template>
  <div>
  <el-card id="right_div" style="float: right;width: -webkit-calc(100% - 400px)">
    <div v-if="right_api" style="margin-left: 40px">
      <el-button @click="save_api" size="mini" type="primary" style="margin-left: -30px">save</el-button>
       <el-button @click="up_api" size="mini" type="text">up</el-button>
        <el-button @click="down_api" size="mini" type="text">down</el-button>
      <el-button  @click="send_api" size="mini" type="success">send</el-button>
       &#12288;<span style="font-size: xx-small" >使用变量请用占位符 {%变量名%},可用在,url,请求体,请求头中</span>
      &#12288;<span >接口id:{{seting_api.id}}</span>
        <el-form ref="form" label-width="120px" label-position="left">
          <el-form-item name="接口名字/描述" label="接口名字/描述" style="margin-top: 20px">
            <el-input v-model="seting_api.label" style="width: 45%" placeholder="名字"></el-input> &#12288;
            <el-input v-model="seting_api.des" style="width: 45%" placeholder="描述"></el-input>
          </el-form-item>
          <el-form-item   name="host" label="host"  style="margin-top: 20px;width: 93%">
<!--            <el-input v-model="seting_api.host"></el-input>-->
         <el-autocomplete
          class="inline-input"
          v-model="seting_api.host"
          :fetch-suggestions="querySearch"
          placeholder="输入域名"
          @select="handleSelect"
          :trigger-on-focus="true"
          style="float: left;width: 100%"
        >
        <template slot-scope="{ item }">
        <div style="color: #0a2d8f"><strong>host：{{item.host}}</strong></div>
        <span style="color: gray;font-size: xx-small">【标签: {{item.type}}】</span>
        <el-divider></el-divider>
        </template>
     </el-autocomplete>
          </el-form-item>
          <el-form-item name="方式/路径" label="方式/路径" style="margin-top: 20px;width: 93%">
            <el-select v-model="seting_api.method" style="width: 100px" placeholder="请求方式">
            <el-option value="POST" label="post"></el-option>
            <el-option value="GET" label="get"></el-option>
              </el-select> &#12288;
            <el-input v-model="seting_api.path" style="width: -webkit-calc(100% - 122px) "></el-input>
          </el-form-item>
          <el-tabs type="border-card" style="width: 93%;" v-model="chose_tab_pane">
            <el-tab-pane  label="Params">
              <el-table
                          border
                          :data="seting_api.params"
                          style="overflow-y: scroll;overflow-x: hidden; max-height:200px;"
                          size="mini">
                          <el-table-column label="参数名" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.key"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数值" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.value"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数描述" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.des"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column>
                                   <template slot="header">
                                       <el-button @click="add_params">新增参数</el-button>
                                   </template>
                                   <template slot-scope="scope">
                                       <el-button size="mini" type="danger" @click="del_params(scope.$index)">删除</el-button>
                                   </template>
                               </el-table-column>
  </el-table>
            </el-tab-pane>
            <el-tab-pane label="Herders"> <el-table
                          :data="seting_api.headers"
                          style="overflow-y: scroll;overflow-x: hidden; max-height:200px;"
                          size="mini"
                          >
                            <el-table-column label="参数名" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.key"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数值" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.value"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数描述" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.des"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column>
                                   <template slot="header">
                                       <el-button @click="add_headers">新增参数</el-button>
                                   </template>
                                   <template slot-scope="scope">
                                       <el-button size="mini" type="danger" @click="del_headers(scope.$index)">删除</el-button>
                                   </template>
                               </el-table-column>
                          <el-table-column
                            prop="name"
                            label="参数描述"
                            width="180">
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            label="操作">
    </el-table-column>
  </el-table></el-tab-pane>
            <el-tab-pane label="Body">
              <el-tabs v-model="seting_api.payload_method" @tab-click="handleClick">
                                <el-tab-pane label="none" name="none"><h2 style="text-align: center;color: darkgray;">不传任何参数</h2></el-tab-pane>
                                <el-tab-pane label="form-data" name="form-data">
                          <el-table
                            :data="seting_api.payload_fd"
                            border
                            style="overflow-y: scroll;overflow-x: hidden; max-height:200px;"
                             size="mini">
                            <el-table-column label="参数名" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.key"></el-input>
                                   </template>
                               </el-table-column>
                               <el-table-column label="参数值" width="180">
                                   <template slot-scope="scope">
                                       <el-input :id="'fd_value_input_'+scope.$index" v-model="scope.row.value"></el-input>
                                   </template>
                               </el-table-column>
                                  <el-table-column label="文件" width="150">
                                                <template slot-scope="scope">
                                                    <el-upload
                                                    class="upload-demo"
                                                    :action=" 'http://localhost:8000/upload_fd_file/?api_id=' + seting_api.id"
                                                    :limit="1"
                                                    name = 'fd_file'
                                                    :on-success="up_fd_file"
                                                    ><el-button @click="set_fd_index(scope.$index)" size="small" type="primary">FILE</el-button>
                                                    </el-upload>
                                                </template>
                                            </el-table-column>
                               <el-table-column label="参数描述" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.des"></el-input>
                                   </template>
                               </el-table-column>
                               <el-table-column>
                                   <template slot="header">
                                       <el-button @click="add_payload_fd">新增参数</el-button>
                                   </template>
                                   <template slot-scope="scope">
                                       <el-button size="mini" type="danger" @click="del_payload_fd(scope.$index)">删除</el-button>
                                   </template>
                               </el-table-column>
                          </el-table>
                          </el-tab-pane>
                          <el-tab-pane label="x-www-form-urlencoded" name="x-www-form-urlencoded">
                          <el-table
                            :data="seting_api.payload_xwfu"
                            border
                            style="overflow-y: scroll;overflow-x: hidden; max-height:200px;"
                             size="mini">
                             <el-table-column label="参数名" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.key"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数值" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.value"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column label="参数描述" width="180">
                                   <template slot-scope="scope">
                                       <el-input v-model="scope.row.des"></el-input>
                                   </template>
                               </el-table-column>

                               <el-table-column>
                                   <template slot="header">
                                       <el-button @click="add_payload_xwfu">新增参数</el-button>
                                   </template>
                                   <template slot-scope="scope">
                                       <el-button size="mini" type="danger" @click="del_payload_xwfu(scope.$index)">删除</el-button>
                                   </template>
                               </el-table-column>
                            </el-table>
                          </el-tab-pane>
                                <el-tab-pane label="raw" name="raw">
                                    <el-select v-model="seting_api.payload_raw_method" style="z-index: 999;width: 120px;position: fixed;right: 56%;" placeholder="请选择">
                                        <el-option label="Text" value="Text"></el-option>
                                        <el-option label="JavaScript" value="JavaScript"></el-option>
                                        <el-option label="JSON" value="JSON"></el-option>
                                        <el-option label="XML" value="XML"></el-option>
                                        <el-option label="HTML" value="HTML"></el-option>
                                    </el-select>
                                    <el-input v-model="seting_api.payload_raw" type="textarea" :rows="6"></el-input>
                                </el-tab-pane>
<!--                                <el-tab-pane label="binary" name="binary">-->
<!--                                    <el-upload-->
<!--                                      class="upload-demo"-->
<!--                                      drag-->
<!--                                      :action="get_action()"-->
<!--                                      :limit="1"-->
<!--                                      name="binary_file"-->
<!--                                    :on-success="upload_binary_file">-->
<!--                                      <i class="el-icon-upload"></i>-->
<!--                                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--                                    </el-upload>-->
<!--                                </el-tab-pane>-->
                                <el-tab-pane label="binary" name="binary">
                                    <el-upload
                                      class="upload-demo"
                                      drag
                                      :action="  'http://localhost:8000/upload_binary_file/?ApiID='+seting_api.id   "
                                      :limit="1"
                                      name = 'binary_file'
                                      :on-success="upload_binary_file"
                                        >
                                      <i class="el-icon-upload"></i>
                                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    </el-upload>
                                </el-tab-pane>
                                <el-tab-pane label="GraphQL" name="GraphQL">
                                    <el-input  v-model="seting_api.payload_GQL_q" type="textarea" :rows="6" style="width: 70%" placeholder="QUERY"></el-input>
                                    <el-input v-model="seting_api.payload_GQL_g" type="textarea" :rows="6" style="width: 30%" placeholder="GRAPHQL VARIABLES"></el-input>
                                </el-tab-pane>
                              </el-tabs></el-tab-pane>
            <el-tab-pane name="Response"  label="Response"> <json-viewer :value="response_R_json"></json-viewer></el-tab-pane>
            <el-tab-pane name="ResponseDate"   label="ResponseDate"><el-input type="textarea" v-model="response_data.RD" :rows="7"></el-input></el-tab-pane>
            <el-tab-pane name="CofigureResult"  label="CofigureResult"><el-input type="textarea" v-model="response_data.CR" :rows="7"></el-input></el-tab-pane>
          </el-tabs>

        </el-form>
      <br><br>
    </div>
    <div v-else-if="right_configure">
                       <!--    配置详情页      -->
                    <el-button @click="save_configure" size="mini" type="primary">Save</el-button>
                    <el-button @click="up_configure" size="mini" type="text">up</el-button>
                    <el-button @click="down_configure" size="mini" type="text">down</el-button>
                     <span style="float: right;">配置ID:{{seting_confing.id}}</span>
                <br>
                    执行时机：
                    <el-select v-model="seting_confing.do_time" placeholder="请选择" style="width:90px">
                        <el-option label="before" value="before"></el-option>
                        <el-option label="after" value="after"></el-option>
                    </el-select>
                    &#12288;配置名称：
                    <el-input style="width:-webkit-calc(100% - 500px)" v-model="seting_confing.label"></el-input>
                <br><br>
                <el-tabs v-model="seting_confing.method" @tab-click="chose_configure_method" tab-position="left" style="height: 100%">
                     <el-tab-pane name="断言" label="断言">
                        <el-select v-model="seting_confing.select" style="width: 120px;margin: 10px">
                            <el-option label="全值检索" value="全值检索"></el-option>
                            <el-option label="正则匹配" value="正则匹配"></el-option>
                            <el-option label="路径匹配" value="路径匹配"></el-option>
                            <el-option label="sql断言" value="sql断言"></el-option>
                        </el-select>
                        <el-input v-model="seting_confing.value" placeholder="请输入表达式、sql语句等" style="width: -webkit-calc(100% - 168px)"></el-input>
                        <br>
                        <p>帮助：</p>
                        <p>1.全值检索：在整个返回值当中，是否存在目标字符串。（.find()） </p>
                        <p>2.正则匹配：需要用户写左边界右边界和匹配正则表达式。也是只检索字符串。</p>
                        <p>3.路径匹配：用户写路径和目标的类型和值。 （只能是json返回值才可用）</p>
                        <p>4.sql断言：用户写sql原生语句和目标值。</p>
                        <p>例子：{"errorCode":200,"data":[{"name":"lisi"},{"name":"zhangsan"},{"name":"wang"}]}</p>
                        <p>全值检索：zhangsan</p>
                        <p>正则匹配：name":"(.*?)"}==zhangsan</p>
                        <p>路径匹配：["data"][1]["name"]=="zhangsan"</p>
                        <p>sql断言：select name from 表 where  id=5;  == "zhangsan" </p>
                        <p>sql断言：select name from 表 where name='zhangsan';  (结果是否为0)</p>


                    </el-tab-pane>
                     <el-tab-pane name="提取" label="提取">

                         <el-select v-model="seting_confing.select" style="width: 120px;margin: 10px">
                            <el-option label="路径提取" value="路径提取"></el-option>
                            <el-option label="正则提取" value="正则提取"></el-option>
                            <el-option label="sql提取" value="sql提取"></el-option>
                        </el-select>
                        <el-input v-model="seting_confing.value" placeholder="请输入表达式、sql查询语句等" style="width: -webkit-calc(100% - 168px)"></el-input>
                        <br>
                        <p>帮助：</p>
                          <p>1.路径提取：用户写变量名=路径。仅限json</p>
                          <p>2.正则提取：用户写变量名=左边界(.*?)右边界</p>
                          <p>3.sql提取：用户写变量名=sql select 查询语句 ，还要加下标。（默认0）</p>
                     </el-tab-pane>
                     <el-tab-pane name="sql增删改" label="sql增删改">
                         <el-input v-model="seting_confing.value" placeholder="请输入需要执行的sql语句" ></el-input>
                        <br>
                        <p>帮助：</p>
                         <p>一般用来执行某个特殊需求，如修改，增加，删除等。用户手写sql语句即可，没有返回结果。</p>

                     </el-tab-pane>
                     <el-tab-pane name="随机变量"  label="随机变量">
                        <el-input v-model="seting_confing.value" placeholder="按照下面要求，输入表达式"></el-input>
                        <br>
                        <p>帮助：</p>
                         <p>1.常数：a=5, a=8.55, a="呵呵", a=[1,2,3] </p>
                          <p>2.随机整数：a=randint(1,10)+2-3-12 #随机生成1-10之内的某个数</p>
                          <p>3.时间戳：a=time.time()</p>
                          <p>4.身份证：a=IDcard() </p>
                          <p>  5.地址：a=random_adress()</p>
                          <p>  6.手机号：a=random_mobile()</p>
                          <p>  7.人名：a=random_name()</p>
                          <p>  8.商品名：a=random_product()</p>
                          <p>  9.统一社会信用代码：a=random_credit()</p>
                          <p>  10.邮箱地址：a=random_email()</p>


                     </el-tab-pane>
                     <el-tab-pane name="mock"  label="mock">
                         <el-select v-model="seting_confing.select" style="width: 120px;margin: 10px">
                            <el-option label="写死返回值" value="写死返回值"></el-option>
                            <el-option label="第三方接口" value="第三方接口"></el-option>
                        </el-select>
                        <el-input type="textarea" :rows="5" v-model="seting_confing.value" placeholder="请输入返回值、接口请求等 "></el-input>
                        <br>
                        <p>帮助：</p>
                         <p>选择写死返回值，可直接粘贴返回值到上面多行输入框，点击保存即可</p>
                         <p>第三方接口，请依次每行输入：url,请求方式,,header字典,请求体</p>
                          <p>http://www.baidu.com
                          post {"a":1,"b":2}<br>form-data/x-www-form_data/raw-json/raw-text/raw-html
                          <br>
                          {"usename":zhansan,"password":123}</p>
                     </el-tab-pane>
                     <el-tab-pane name="插入参数"  label="插入参数">

                        <el-select v-model="seting_confing.select" style="width: 150px;margin: 10px">
                            <el-option label="request_header" value="request_header"></el-option>
                            <el-option label="params" value="params"></el-option>
                            <el-option label="request_body" value="request_body"></el-option>
                        </el-select>
                        <el-input v-model="seting_confing.value" placeholder="请输入表达式等" style="width: -webkit-calc(100% - 198px)"></el-input>
                        <br>
                        <p>帮助：</p>
                         <p>比如：a=55</p>

                     </el-tab-pane>
                     <el-tab-pane name="加密算法"  label="加密算法">
                          <el-select v-model="seting_confing.select" style="width: 150px;margin: 10px" placeholder="插入位置">
                            <el-option label="request_header" value="request_header"></el-option>
                            <el-option label="params" value="params"></el-option>
                        </el-select>
                        <el-input v-model="seting_confing.value" placeholder="请输入表达式等" style="width: -webkit-calc(100% - 198px)"></el-input>
                        <br>
                        <p>帮助：</p>
                         <p>比如：sign = python能执行的加密算法， 其中可以使用接口的全部位置的参数,函数（hashlib.md5(),hashlib.shar1()）</p>
                     </el-tab-pane>
                     <el-tab-pane name="草稿"  label="草稿">
                         <el-input type="textarea" :rows="10" placeholder="请随意使用该文本框"></el-input>
                         <p>帮助：临时存放粘贴字符串用</p>
                     </el-tab-pane>
                </el-tabs>
            </div>
    <div v-else-if="right_report">
      <Report :pro_ject_id='pro_ject_id'></Report>
<!--      <p style="text-align: center;font-size:20px;margin-top: -10px;margin-bottom: -30px">结果树</p>-->
<!--                <el-dialog title="报告详情如下：" :visible.sync="dialogFormVisible3" width="90%">-->
<!--                    <el-collapse v-for="i in apis_result">-->
<!--                          <el-collapse-item title="一致性 Consistency" name="1">-->
<!--                              <template slot="title">-->
<!--                                  <strong :style="{color:getColor(i.result)}">{{ i.label }}</strong>-->
<!--                              </template>-->
<!--                              <span style="color:grey">【接口结果】</span><strong> {{i.result}} </strong> <br>-->
<!--                              <span style="color:grey">【HttpStatus】</span><strong> {{i.status_code}} </strong> <br>-->
<!--                              <span style="color:grey">【请求类型】</span><strong> {{i.method}} </strong> <br>-->
<!--                              <span style="color:grey">【请求url】</span><strong> {{i.url}} </strong> <br>-->
<!--                              <span style="color:grey">【请求头】</span><strong> {{i.request_headers}} </strong> <br>-->
<!--                              <span style="color:grey">【请求体类型】</span><strong> {{i.payload_method}} </strong> <br>-->
<!--                              <span style="color:grey">【配置执行结果】</span><strong> {{i.CR}} </strong> <br>-->
<!--                              <span style="color:grey">【变量提取结果】</span><strong> {{i.TQ}} </strong> <br>-->
<!--                              <span style="color:grey">【请求体raw类型】</span><strong> {{i.payload_raw_method}} </strong> <br>-->
<!--                              <span style="color:grey">【请求体】</span><strong> {{i.payload}} </strong> <br>-->
<!--                              <span style="color:grey">【返回体】</span><strong> {{i.R}} </strong> <br>-->
<!--                              <span style="color:grey">【返回头】</span><strong> {{i.response_headers}} </strong> <br>-->
<!--                          </el-collapse-item>-->
<!--                    </el-collapse>-->
<!--                </el-dialog>-->
<!--      <el-button style="float: right" type="danger" @click="clear_all_reports">清空</el-button>-->
<!--      <el-table :data="all_reports" stripe style="max-width: 100%;max-height: 500px">-->
<!--      <el-table-column label="报告ID" width="100px" >-->
<!--              <template slot-scope="scope">-->
<!--                <span> {{scope.row.id}}</span>-->
<!--              </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="报告时间" width="200px" >-->
<!--              <template slot-scope="scope">-->
<!--                <span> {{scope.row.create_time}}</span>-->
<!--              </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="结果树" width="200px" >-->
<!--              <template slot-scope="scope">-->
<!--                <span :style="{color:getColor(scope.row.all_result)}"> {{scope.row.all_result}}</span>-->
<!--              </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column >-->
<!--              <template slot-scope="scope">-->
<!--                <el-button type="primary" size="mini" @click="look_report_data(scope.$index)">详情</el-button>-->
<!--              </template>-->
<!--      </el-table-column>-->
<!--        </el-table>-->
    </div>
    <div v-else="right_null">请选择左侧接口</div>

  </el-card>
      <h5>接口用例设置 &#12288; <el-button @click="add_apis" size="mini" type="primary">新增接口</el-button></h5>
    <el-scrollbar  style="height: 590px;margin-left: 0px;padding: 0px">
      <el-tree
      id="left_div,"
      size="mini"
      type="text"
      :data="apis"
      show-checkbox
      node-key="id"
      :default-checked-keys="dck"
      :default-expanded-keys="dek"
      @check-change="handleCheckChange"
      ref="tree"
      :check-strictly="true"
      >
      <span slot-scope="{data}">
        <span v-text="get_label(data.label)" style="margin-right: 20px;">&#12288;</span>

        <el-button
            v-if="vif(data)"
            icon="el-icon-circle-plus-outline"

            type="text"
            @click="() => add(data)">

          </el-button>
         <el-button
             icon="el-icon-s-tools"
            type="text"
            @click="() => set(data)">

          </el-button>
          <el-button
            icon="el-icon-delete"
            type="text"
            @click="() =>remove(data)">
          </el-button>
      </span>
      </el-tree>
      </el-scrollbar>
    <el-card style="position: fixed;bottom: 15px;height: 180px;width: 87%">
      <el-input v-model="in_input" type="textarea" :rows="6" placeholder="当前可用变量" style=" float:right;width: -webkit-calc(100% - 300px)"> </el-input><br><br>
      <el-button @click="run" type="success" size="mini" >执行</el-button> <span style="font-size: 17px">正在执行:</span><span id="doing_api" style="font-size: 15px"></span><br><br>
      <el-button type="primary " @click="look_report" size="mini" style="margin-top: -50px">报告 </el-button>  <span  style="font-size: 17px">最终结果</span><span id="end_result"></span>

  </el-card>
  </div>
</template>

<script>
import axios from "axios";
import JsonViewer from 'vue-json-viewer';
import Report from '../components/Report'

export default {
  name: "Pro_ject_case_",
  data(){
  return{
      // apis_result:[],
      // dialogFormVisible3:false,
      // all_reports:[],
      right_report:false,
      env_list:[],
      response_R_json:'',
      chose_tab_pane:'',
      in_input:[],
      right_api:false,
      right_configure:false,
      useable_par:'',
      apis:[{name:'登录接口'}],
      seting_api:{},
      seting_confing:{},
      dck:[],
      dek:[],
      tableData:[{name:"name",des:"des"}],
      activeName:'',
      ref:"tree",
      response_data:{
                    R:'',
                    RD:'',
                    CR:'',
                }


  }
  },
  mounted() {
    document.getElementById('right_div').style.minHeight=(document.documentElement.clientHeight-360).toString()+'px'
    document.getElementById('left_div,').style.maxHeight=(document.documentElement.clientHeight-710).toString()+'px'
    // document.getElementById('left_div').style.maxHeight = (document.documentElement.clientHeight-334).toString()+'px';
    axios.get('http://localhost:8000/get_apis/',{params:{
      pro_ject_id:this.pro_ject_id
      }
    }).then(res=>{
      this.apis=res.data
    });
    axios.get('http://localhost:8000/get_dck/',{
      params:{pro_ject_id:this.pro_ject_id}

    }).then(res=>{this.dck=[]})
    axios.get('http://localhost:8000/get_envlist/').then(res=>{
      this.env_list=res.data;
      this.restaurants=this.loadAll();
    })
  },
  methods:{

       look_report(){
          this.right_configure=false;
          this.right_api=false;
          this.right_report=true

        },
       set_fd_index(index){
          console.log(index)
                this.fd_index = index;
            },
       up_fd_file(res,file){
          console.log(res,file)
                var file_name ='*FILE*'+this.seting_api.id+'_'+file.raw.name;
                this.seting_api.payload_fd[this.fd_index].value = file_name;
                document.getElementById('fd_value_input_'+this.fd_index).value = file_name;
                document.getElementById('fd_value_input_'+this.fd_index).disabled = true;
            },
       get_action(data){
         console.log(data)
                return process.env.VUE_APP_BASE_URL+'/upload_binary_file/?ApiID='+this.seting_api.id

            },
        upload_binary_file(res,file){
                this.seting_api.payload_binary = this.seting_api.id+'_'+file.raw.name;
            },
       up_api(){
                axios.get('http://localhost:8000/up_api/',{
                    params:{
                        api_id:this.seting_api.id,
                        pro_ject_id:this.pro_ject_id,
                    }
                }).then(res=>{
                    this.apis=res.data;
                    this.right_api = false;
                    this.dek = [ this.seting_api.id ]
                })
            },
       down_api(){
                 axios.get('http://localhost:8000/down_api/',{
                    params:{
                        api_id:this.seting_api.id,
                        pro_ject_id:this.pro_ject_id,
                    }
                }).then(res=>{
                    this.apis=res.data;
                    this.right_api = false;
                    this.dek = [ this.seting_api.id ]
                })

            },
       up_configure(){
                axios.get('http://localhost:8000/up_configure/',{
                    params:{
                        seting_confing_id:this.seting_confing.id,
                        pro_ject_id:this.pro_ject_id,
                    }
                }).then(res=>{
                    this.apis = res.data;
                    this.right_configure = false;
                    this.dek = [parseInt(this.seting_confing.id.split('_')[0])  ]
                })
            },
       down_configure(){
                axios.get('http://localhost:8000/down_configure/',{
                    params:{
                        seting_confing_id:this.seting_confing.id,
                        pro_ject_id:this.pro_ject_id
                    }
                }).then(res=>{
                    this.apis = res.data
                    this.right_configure = false;
                    this.dek = [  parseInt(this.seting_confing.id.split('_')[0])  ]
                })
            },
       chose_configure_method(tab){
                this.seting_confing.select = '';
                this.seting_confing.value = '';
                this.seting_confing.method = tab.label;
            },
       get_label(label){
              return label.substring(0,15) + ((label.length>8)?'...':'')
        },
       add(data){
            axios.get('http://localhost:8000/add_configure/',{params:{
              id:data.id,
              pro_ject_id:this.pro_ject_id,
              }}).then(res=>{this.apis=res.data;
                              this.dek=[data.id];})
            },
       add_apis(data){
          axios.get('http://localhost:8000/add_apis/', {params:{
            pro_ject_id:this.pro_ject_id
            }}).then(res=>{this.apis=res.data})
        },
       handleCheckChange(data, checked){
                axios.get('http://localhost:8000/set_dck/',{
                    params:{
                        pro_ject_id:this.pro_ject_id,
                        dck:this.$refs.tree.getCheckedKeys().toString()
                    }
                }).then(res=>{
                    this.dck = res.data
                })
            },
       set(data){
          console.log(data)
             if(data.type == 'api'){
                    this.right_api = true;
                    this.right_configure = false;
                    this.right_report=false
                    this.seting_api = data;
                    this.response_data= {R:'',RD:'',CR:''};
                    this.response_R_json='';
                    axios.get('http://localhost:8000/get_user_par/',{params:{
                      api_id:data.id,
                      pro_ject_id:this.pro_ject_id
                      }}).then(res=>{
                        this.in_input=res.data;
                    })
                }else{
                    this.right_api = false;
                    this.right_configure = true;
                    this.seting_confing = data
                    this.right_report=false

                }
        },
       // remove(data){
       //          console.log(data)
       //          if(confirm("确定删除么?")==false){return}
       //          axios.get('http://localhost:8000/remove_ac/',{
       //              params:{
       //                  pro_ject_id:this.pro_ject_id,
       //                  id: data.id,
       //              }
       //          }).then(res=>{
       //              this.dck.delete(data.id)
       //              this.apis = res.data
       //              this.right_api = false;
       //              this.right_configure = false;
       //              this.dck=res.data.dck
       //          })
       //      },
          remove(data){
                if(confirm("确定删除么?")==false){return}
                axios.get('http://localhost:8000/remove_ac/',{
                    params:{
                        pro_ject_id:this.pro_ject_id,
                        id: data.id,
                    }
                }).then(res=>{
                    this.apis = res.data
                    this.right_api = false;
                    this.right_configure = false;
                })
            },
       vif(data){
          if(data.type=='api'){
            return true
          }else{
            return false
          }
        },
       handleClick(tab,checked){ console.log(tab,checked)},
       save_configure(data){
                  console.log(data)
                  axios.post('http://localhost:8000/save_configure/',this.seting_confing,{
                    params:{
                      pro_ject_id : this.pro_ject_id
                    }
                  }).then(res=>{
                    this.apis=res.data;
                    this.$message({
                      message:'保存成功',
                      type:"warning",
                    })
                  })

            },
       save_api(){
                axios.post('http://localhost:8000/save_api/',this.seting_api,{
                    params:{
                        pro_ject_id : this.pro_ject_id
                    }
                }).then(res=>{
                    this.apis=res.data;
                    this.$message({
                        message:"保存成功",
                        type:"success"
                    })
                })
            },
       send_api(){
                axios.post('http://localhost:8000/send_api/',this.seting_api,{
                    params:{
                        pro_ject_id : this.pro_ject_id
                    }
                }).then(res=>{
                    this.response_data = res.data;
                    this.chose_tab_pane = 'Response';
                    try {
                      return this.response_R_json = JSON.parse(this.response_data.R)
                    } catch (e){return this.response_data.R}


                })
            },
       add_params(){
                this.seting_api.params.push( {'key':'','value':''} )
            },
       del_params(index){
                this.seting_api.params.splice(index,1)
            },
       add_headers(){
                this.seting_api.headers.push( {'key':'','value':''} )
            },
       del_headers(index){
                this.seting_api.headers.splice(index,1)
            },
       add_payload_fd(){
                this.seting_api.payload_fd.push( {} )
            },
       del_payload_fd(index){
                this.seting_api.payload_fd.splice(index,1)
            },
       add_payload_xwfu(){
                this.seting_api.payload_xwfu.push( {} )
            },
       del_payload_xwfu(index){
                this.seting_api.payload_xwfu.splice(index,1)
            },
       run(){

                this.right_configure=false;
                this.right_api=false;
                this.right_report=false
                if(confirm('执行大用例之前请先确保当前接口或配置的设置已保存！') == false){return}
                var end_result = document.getElementById('end_result');
                var doing_api = document.getElementById('doing_api');
                var pro_ject_id = this.pro_ject_id;
                var t = setInterval(function () {
                    axios.get('/doing_api/',{
                        params:{
                            pro_ject_id: pro_ject_id
                        }
                    }).then(res=>{
                        doing_api.innerText = res.data
                    })
                },500);

                axios.get('/run/',{
                    params:{
                        pro_ject_id:this.pro_ject_id,
                        // dck:this.dck.toString(),
                    }
                }).then(res=>{
                    clearInterval(t);
                    end_result.innerText = res.data;
                    if(res.data == 'True'){
                        end_result.style.color = 'green'
                    }else{
                        end_result.style.color = 'red'
                    }
                    doing_api.innerText = '全部执行完毕'
                })

            },
       report(){

            },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.host.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return this.env_list;
      },
      handleSelect(item) {
        this.seting_api.host=item.host;
      },
      },
      props:['pro_ject_id'],
      components:{Report}


}
</script>

<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>